<template>
  <div>
    <!-- APP下载界面 -->
    <div class="download-bg">
      <img src="../assets/imgs/help-bg.376c758.png" alt="" />
      <div class="download-title">APP下载</div>
    </div>
    <div class="download-content warp">
      <div class="download-content-main">
        <div class="app-down-info mt-10 mb-10 pad-10">
          <div class="app-title pad-10 mt-10 mb-10">
            <h2>易学啦APP全新发布，中学生专属的学习APP</h2>
          </div>
          <div class="down-ops pad-10 mt-10 mb-10">
            <img src="../assets/imgs/yixuela-app-qcode.png" width="200" />
            <span class="tips mt-10 mb-10"
              >扫描上方二维码或应用市场搜索 易学啦 下载</span
            >
            <p><br /></p>
            <p><span class="tips">注:账号以及VIP与易学啦账号通用哦</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.download-bg {
  position: relative;
  img {
    height: 200px;
    width: 100%;
  }
  .download-title {
    position: absolute;
    top: 42px;
    left: 30%;
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    line-height: 56px;
    letter-spacing: 5px;
  }
}
.download-content {
  margin-top: -40px;
  position: relative;
  display: flex;
  z-index: 5;
  .download-content-main {
    width: 960px;
    min-height: 468px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
    border-radius: 6px;
    padding: 0 30px;
    margin: 0 auto 30px;
    .app-down-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      align-items: center;
      text-align: center;
      .down-ops {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>